<template>
  <el-container>
    <VSidebar @handleselect="handleselect" :collapse="collapse" :open="addOpen"></VSidebar>
    <el-container>
      <el-header class="top-header">
        <div class="menu-box">
          <el-button class="menu1" @click.native="toggleMenu" type="primary">菜单</el-button>
          <el-button style="margin-left: 0" class="menu2" @click.native="toggleoutin" type="primary">菜单</el-button>
        </div>
      </el-header>
      <el-main>
        <!--展示的内容都这这个router-view-->
        <div class="main">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import VHead from './Header'
  import VSidebar from './SideBar'

  export default {
    name: 'Home',
    data() {
      return {
        collapse: false,
        addOpen: false,
      }
    },
    components: {
      VHead, VSidebar
    },
    mounted() {

    },
    methods: {
      toggleMenu() {
        this.collapse = !this.collapse;
      },
      toggleoutin() {
        this.collapse = false;
        this.addOpen = !this.addOpen;
      },
      handleselect(val) {
        this.addOpen = val;
      }
    }
  }

</script>

<style lang="less">
  .menu-box {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
    text-align: center;
    background-color: rgb(84, 92, 100);
    min-height: 100%;
    overflow: hidden;
  }

  .menu1 {
    display: block;
    @media screen and (max-width: 500px) {
      display: none;
    }
  }

  .menu2 {
    display: none;
    @media screen and (max-width: 500px) {
      display: block;
    }
  }

  .el-main {
    background-color: #fff;
  }

</style>
